<template>
  <div class="defense">
    <div class="left-box">
      <div class="playground-container">
        <AveragePosition :players-position="rating.players"/>
        <div class="legend">
          <img class="attack-arrow" src="../../../../../assets/image/playerGround/rightArrow.png" alt="">
        </div>
      </div>
    </div>
    <div class="right-box">
      <RatingTable :players-rating="rating.playersRating.slice(0,7)"/>
      <RatingTable :players-rating="rating.playersRating.slice(8,rating.playersRating.length)"/>
    </div>
  </div>
</template>

<script>
  import AveragePosition from "../../../../playground/AveragePosition";
  import RatingTable from "./RatingTable";
  export default {
    name: "HomeRating",
    props:{
      rating:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    components:{
      AveragePosition,
      RatingTable,
    },
    data(){
      return {
      }
    }
  }
</script>

<style scoped lang="scss">
  .defense {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .left-box {
    /*height: 456px;*/
    /*margin-left: 10px;*/
  }
  .playground-container {
    width: 531px;
    position: relative;
    /*height: 456px;*/
    /*background-color: red;*/
    margin-top: 18px;
    /*.playground-top {*/
    /*  display: flex;*/
    /*  justify-content: space-between;*/
    /*  width: 591px;*/
    /*  color: #656F73;*/
    /*  line-height: 25px;*/
    /*  font-size: 16px;*/
    /*  height: 25px;*/
    /*  text-align: left;*/
    /*  !*background-color: #656F73;*!*/
    /*.playground-top-item {*/
    /*  width: 90px;*/
    /*  height: 25px;*/
    /*  !*background-color: yellow;*!*/
    /*  display: flex;*/
    /*  justify-content: center;*/
    /*  align-items: center;*/
    /*  img {*/
    /*    !*background-color: orange;*!*/
    /*    width: 25px;*/
    /*    height: 25px;*/
    /*  }*/
    /*}*/
    /*.playground-top-item {*/
    /*  !*width: 170px;*!*/
    /*  !*margin-left: 20px;*!*/
    /*  !*background-color: red;*!*/
    /*}*/
    /*}*/
    /*.playground-right {*/
    /*  position: absolute;*/
    /*  top: 30px;*/
    /*  left: 603px;*/
    /*  color: #BD1E1E;*/
    /*  display: flex;*/
    /*  justify-content: space-between;*/
    /*  width:17px;*/
    /*  height: 383px;*/
    /*  writing-mode: vertical-lr;*/
    /*  font-size: 18px;*/
    /*  .little-block {*/
    /*    height: 3px;*/
    /*    background-color: #BBBBBB;*/
    /*    font-size: 25px;*/
    /*  }*/
    /*  .rate{*/
    /*    !*background-color: red;*!*/
    /*    line-height:16px;*/
    /*  }*/
    /*}*/
    .legend {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      width: 591px;
      height: 40px;
      .attack-arrow {
        width: 150px;
        /*height: 20px;*/
      }
    }
  }
  .right-box {
    width: 900px;
    height: 413px;
    margin-top: -30px;
    /*margin-right: 70px;*/
    /*background-color: yellow;*/
    display: flex;
  }
</style>